<template>
	<div class="bigDiv">
		<el-form :inline="true" label-width="100px">
			<div class="topNav">
				<el-button type="text" icon="el-icon-search" @click="getList" style="float:right;">搜索</el-button>
				<el-button type="text" icon="el-icon-refresh" @click="resetQuery"
					style="float:right;margin-right:10px;">重置</el-button>
				<el-button type="text" icon="el-icon-plus" @click="addQuery">新建审批</el-button>
			</div>
			<el-form-item label="时间" prop="time">
				<el-date-picker v-model="timeModel" type="daterange" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期" value-format="yyyy-MM-dd hh:mm:ss" size="small">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="任务状态">
				<el-select size="small" v-model="queryParams.del" placeholder="请选择状态" 
					clearable>
					<el-option label="停用" value="1"></el-option>
					<el-option label="启用" value="0"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="审批流名称">
				<el-input v-model="queryParams.activitiName" placeholder="审批流名称" clearable size="small"
					@keyup.enter.native="getList" />
			</el-form-item>
		</el-form>

		<el-table v-loading="loading" :data="tastList">
			<el-table-column label="审批流名称" align="center" prop="activitiName" />
			<el-table-column label="创建时间" align="center" prop="createTime" />
			<el-table-column label="审批人" align="center" prop="userName" />
			<el-table-column label="状态" align="center">
				<template slot-scope="scope">
					<div v-if="scope.row.del == 1">停用</div>
					<div v-if="scope.row.del == 0">启用</div>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button size="mini" type="text" icon="el-icon-info" @click="deleteId(scope.row,'1')" v-if="scope.row.del == '0'">停用
					</el-button>
					<el-button size="mini" type="text" icon="el-icon-info" @click="deleteId(scope.row,'0')" v-if="scope.row.del == '1'">启用
					</el-button>
					<el-button size="mini" type="text" icon="el-icon-info" @click="updateId(scope.row)">修改
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />
		<el-dialog :title="title" :visible.sync="open" v-if="open" width="500px" append-to-body>
			<el-form :model="form" ref="form" label-width="100px" class="demo-dynamic">
				<el-form-item label="审批流名称">
					<el-input v-model="form.activitiName"></el-input>
				</el-form-item>
				<el-form-item :label="indexs+1+'级审批'" v-for="(items,indexs) in peopleList">
					<el-select v-model="items.id" filterable style="width:80%">
						<el-option :label="item.name" :value="item.id" v-for="item in userList"></el-option>
					</el-select>
					<el-button style="float:right;" @click="deletePeople(items,indexs)">删除</el-button>
				</el-form-item>
				<el-button style="float:right;" @click="addPerson">添加审批人</el-button>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="open = false">取 消</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import {selActivitiList,insertActiviti,updateActiviti,selectUser} from '@/api/workOrder.js'
	export default {
		name: "Leave",
		data() {
			return {
				id: '',
				definitionKey: '',
				businessKey: '',
				// 遮罩层
				loading: false,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 请假表格数据
				tastList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				// 表单参数
				form: {

				},
				// 表单校验
				rules: {},
				peopleList: [],
				userList: [],
				timeModel:[]
			};
		},
		created() {
			this.getList();
			this.selectUser();
		},
		methods: {
			selectUser(){
				selectUser({
					code:'leader'
				}).then(res=>{
					if(res.code == 200){
						this.userList = res.rows;
					}
				})
			},
			deleteId(row,t) {
				updateActiviti({
					id:row.id,
					isDel:t
				}).then(res=>{
					if(res>0){
						this.$message.success("操作成功");
						this.open = false;
						this.getList();
					}else{
						this.$message.error("操作失败");
					}
				})
			},
			updateId(row) {
				this.title = "修改"
				this.form = row;
				this.open = true;
				this.peopleList = [];
				var nameArr = row.userName.split(",");
				var idArr = row.userId.split(",");
				for (var i = 0; i < nameArr.length; i++) {
					this.peopleList.push({
						id:idArr[i],
						name:nameArr[i]
					})
				}
			},
			submitForm() {
				if (!this.form.activitiName || this.form.activitiName.length <= 0) {
					return this.$message.error("请输入审批流名称");
				}
				var peopleList = this.peopleList;

				if (peopleList.length <= 0) {
					return this.$message.error("请选择审批人");
				}
				var nameArr = [];
				var idArr = [];
				for (var i = 0; i < peopleList.length; i++) {
					for (var j = 0; j < this.userList.length; j++) {
						if (peopleList[i].id == this.userList[j].id) {
							idArr.push(this.userList[j].id)
							nameArr.push(this.userList[j].name)
						}
					}
				}
				var nameStr = nameArr.join(",");
				var idStr = idArr.join(",");
				if(this.form.id){
					updateActiviti({
						userName:nameStr,
						userId:idStr,
						activitiName:this.form.activitiName,
						id:this.form.id
					}).then(res=>{
						if(res>0){
							this.$message.success("修改成功");
							this.open = false;
							this.getList();
						}else{
							this.$message.error("修改失败");
						}
					})
				}else{
					insertActiviti({
						userName:nameStr,
						userId:idStr,
						activitiName:this.form.activitiName
					}).then(res=>{
						if(res>0){
							this.$message.success("新增成功");
							this.open = false;
							this.getList();
						}else{
							this.$message.error("新增失败");
						}
					})
				}
			},
			deletePeople(item, indexs) {
				this.peopleList.splice(indexs, 1)
			},
			addPerson() {
				this.peopleList.push({});
			},
			addQuery() {
				this.title = "新增"
				this.open = true;
			},
			refuse(row) {
				refuseTWait(row).then(res => {
					if (res.code == 200) {
						this.getList();
						this.$message.success("审批成功");
					} else {
						this.$message.error("审批失败");
					}
				}).catch(err => {
					this.$message.error("审批失败");
				})
			},
			agree(row) {
				agreeeTWait(row).then(res => {
					if (res.code == 200) {
						this.getList();
						this.$message.success("审批成功");
					} else {
						this.$message.error("审批失败");
					}
				}).catch(err => {
					this.$message.error("审批失败");
				})
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10
				}
			},


			/** 查询请假列表 */
			getList() {
				if (this.timeModel && this.timeModel.length > 0) {
					this.queryParams.startTime = this.timeModel[0];
					this.queryParams.endTime = this.timeModel[1];
				}
				selActivitiList({
					...this.queryParams
				}).then(res=>{
					if(res.code == 200){
						this.tastList = res.rows;
						this.total = res.total;
					}
				})
			},

		}
	};
</script>